<template>
  <div id="app" v-if="patientNet">
    <span id="firstLine" >
      <div id="f_left" >
        <span>体重:&nbsp;</span>
        <span>{{patient.weight||0}}kg</span>
      </div>
      <div id="f_right">
        <span>身高:&nbsp;</span>
        <span>{{patient.height||0}}cm</span>
      </div>
    </span>
    <span id="secondLine">
      <div id="f_left">
        <span>血型:&nbsp;</span>
        <span>{{patient.blood}}</span>
      </div>
      <div id="f_right">
        <span>{{patient.bloodType}}</span>
      </div>
    </span>
    <span id="thirdLine">
      <div id="f_left">
        <span>左耳听力:&nbsp;</span>
        <span>{{patient.leftEar}}</span>
      </div>
      <div id="f_right">
        <span>右耳听力:&nbsp;</span>
        <span>{{patient.rightEar}}</span>
      </div>
    </span>
    <span id="fouthLine">
      <div id="f_left">
        <span>左眼视力:&nbsp;</span>
        <span>{{ patient.leftVision }}</span>
      </div>
      <div id="f_right">
        <span>右眼视力:&nbsp;</span>
        <span>{{ patient.leftVision }}</span>
      </div>
    </span>
    <span id="fifthLine">
      <div id="f_left">
        <span>紧急联系人:&nbsp;</span>
        <span>{{ patient.contact}}</span>
      </div>
      <div id="f_right">
        <span>关系:&nbsp;</span>
        <span>{{ patient.bear}}</span>
      </div>
    </span>
    <span id="sixthLine">
      <span id="f_left">个人史:&nbsp;{{ patient.persionHistory}}</span>
    </span>
    <span id="seventhLine">
      <span id="f_left">家族史:&nbsp;{{ patient.familyHistory}}</span>
    </span>
    <span id="ninthLine">
      <span id="f_left">电话:&nbsp;{{patient.cphone}}</span>
    </span>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { useStore,mapGetters,mapMutations } from "vuex";
  const store = useStore();  
  const patientNet = computed(mapGetters(["getPatient"]).getPatient.bind({$store: store,}))
  const patient = computed(()=>{
     return patientNet.value || {
      "patientId": null,
      "birthday": null,
      "height": null,
      "weight": null,
      "leftEar": 30,
      "rightEar": 34,
      "leftVision": 3,
      "rightVision": 3,
      "familyHistory": "健康",
      "bear": "父子",
      "contact": "李桓",
      "blood": "A",
      "bloodType": "HR阴",
      "persionHistory": "低血糖",
      "cphone": "41234123423"
  }
  })
  // const patient=reactive( {
  //     "patientId": null,
  //     "birthday": null,
  //     "height": null,
  //     "weight": null,
  //     "leftEar": 30,
  //     "rightEar": 34,
  //     "leftVision": 3,
  //     "rightVision": 3,
  //     "familyHistory": "健康",
  //     "bear": "父子",
  //     "contact": "李桓",
  //     "blood": "A",
  //     "bloodType": "HR阴",
  //     "persionHistory": "低血糖",
  //     "cphone": "41234123423"
  // })
</script>
<style scoped>
#app {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#app > span {
  display: flex;
  height: 30px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  /*  ; */
}
#f_left {
  margin-left: 10px;
}
#f_right{
    margin-right: 10px;
}
#f_left > span{
    font-weight: 600;
}
#f_right > span{
    font-weight: 600;
}
</style>
